<template>
	<gui-page 
	:fullPage="true" 
	ref="guiPage">
		<template 
		v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column">
				<!-- view style="height:200rpx;" class="gui-bg-blue"></view -->
				<view class="gui-flex1 gui-relative cc-chapterbox">
					<view class="chapter-items" v-for="(item,index) in chapterList" @click="handleChapter(item,index)">
						<view class="titbox flex justify-content-between align-items gui-padding gui-bg-gray">
							<view class="tit">发刊词</view>
							<view v-if="item.expand"><text class="gui-icons">&#xe654;</text></view>
							<view v-else><text class="gui-icons">&#xe603;</text></view>
						</view>
						
						<view class="lesson-box gui-padding-m" v-if="item.expand" >
							<view  class="lesson-items flex justify-content-between align-items gui-padding-m" v-for="(num,cindex) in 5"
								@click.stop="handleLesson(item,index,cindex)" :class="[lessonIndex == cindex && chapterIndex == index?'green':'']">
								<view class="flex align-items">
									<view class="tag">视频</view>
									<view class="tit">1.搜索，10倍提升各种效率的技能</view>
								</view>
								<view class="fz12 gui-color-green" v-if="lessonIndex == cindex && chapterIndex == index">播放中</view>
								<view v-else>
									<view class="fz12 red" v-if="false">可试看</view>
									<view v-else><text class="gui-icons">&#xe641;</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
export default {
	data() {
		return {
			chapterList : [],
			lessonIndex:0,
			chapterIndex:0
		}
	},
	created:function(){
		this.chapterList = [{title:"发刊词",expand:true,id:1},{title:"发刊词",expand:true,id:4},{title:"发刊词",expand:true,id:3}]
	},
	methods:{
		handleChapter(item,index){
			this.chapterIndex = index
			item.expand = !item.expand
		},
		handleLesson(citem,index,cindex){
			this.chapterIndex = index
			this.lessonIndex = cindex
		}
	}
}
</script>
<style scoped lang="scss">
	.chapter-items{margin-bottom: 2px;}
	.lesson-items {
		.tit{font-size:14px}
		.tag{font-size:12px;border: 1px solid #333;padding: 2px;border-radius: 4px;color:#666;margin-right: 10px;}
		&.green{
			.tit,.tag{color:#39B55A !important;border-color: #39B55A !important;}
		}
	}
	
</style>